// 会员管理
<template>
  <div class="role">
     <div class="role-content">
        <div class="role-top">
            <el-select v-model="paging.status" placeholder="请选择用户状态">
                <el-option
                v-for="item in statelist"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="paging.level" placeholder="请选择用户会员等级">
                <el-option
                v-for="item in memberlist"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="paging.gender" placeholder="请选择用户性别">
                <el-option
                v-for="item in genderlist"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-input placeholder="请输入用户Id" v-model="paging.id" clearable></el-input>
            <el-input placeholder="请输入昵称" v-model="paging.name" clearable></el-input>
            <el-button type="primary" icon="el-icon-search" @click="Usermanage">搜索</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="addEquipment()">添加用户</el-button>
        </div>
        <!--内容 -->
        <el-card class="box-card">
             <el-table :data="listData" style="width: 100%"  border>
                <el-table-column  prop="id" label="用户ID"  sortable> </el-table-column>
                <el-table-column prop="nickname" label="呢称"  > </el-table-column>
                <el-table-column prop="phone" label="手机号码"  > </el-table-column>
                <el-table-column prop="gender" label="性别"  > 
                    <template slot-scope="scope">
                            <el-tag>{{scope.row.gender|genders}}</el-tag>    <!-- 采用过滤判断值 -->       
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="会员等级"> 
                    <template slot-scope="scope">
                            <el-tag>{{scope.row.level|levels}}</el-tag><!-- 采用过滤判断值 -->   
                    </template>
                </el-table-column>
                <el-table-column prop="birthday" label="生日"  > </el-table-column>
                <el-table-column prop="status" label="状态"  > 
                    <template slot-scope="scope">
                            <el-tag>{{scope.row.status|statuss}}</el-tag><!-- 采用过滤判断值 -->   
                    </template>
                </el-table-column>
                <el-table-column label="上次登录时间"  >
                    <template slot-scope="scope"  prop="gmtLastLogin">
                      {{scope.row.gmtLastLogin|formatDate()}}<!-- 采用过滤判断值 -->   
                    </template> 
                </el-table-column>
                <el-table-column prop="lastLoginIp" label="上次登录IP"></el-table-column>
                <el-table-column label="操作" width="280px" >
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="authorization(scope.row)" class="blue">
                             <template>{{scope.row.status|status}}</template></el-button>
                        <el-button size="mini"  @click="handelEdit(scope.row)" class="blue">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <div class="block">
        <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
        <Paging @handle="handles" :allPages="paging"></Paging>
      </div>
        <!-- 添加编辑 -->
        <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
            <el-form-item label="用户昵称" prop='nickname' :label-width="formLabelWidth">
              <el-input v-model="ruleForm.nickname" autocomplete="off"></el-input>
            </el-form-item>
          <el-form-item label="用户手机号"  prop='phone' :label-width="formLabelWidth">
            <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户密码"  prop='password' :label-width="formLabelWidth">
            <el-input v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
           <el-form-item label="用户性别"  :label-width="formLabelWidth" >
                <el-select v-model="ruleForm.gender" placeholder="请选择" style="padding-left: 45px;">
                    <el-option
                    v-for="item in statelist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户等级"  :label-width="formLabelWidth" >
                <el-select v-model="ruleForm.level" placeholder="请选择" style="padding-left: 45px;">
                    <el-option
                    v-for="item in memberlist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户状态"  :label-width="formLabelWidth" >
                <el-select v-model="ruleForm.status" placeholder="请选择" style="padding-left: 45px;">
                    <el-option
                    v-for="item in genderlist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="affirm(ruleForm)">确 定</el-button>
            </div>
        </el-dialog>
     </div>
  </div>
</template>
<script>
import usermanage from'../../api/system/usermanage.js'
import Paging from "../../components/Paging"; //分页
export default {
components: {
    Paging
  },
  data() {
    return {
        statelist:[{//状态
          value: '0',
          label: '冻结'
        },{
          value: '1',
          label: '激活'
        },{
          value: null,
          label: '全部'
        }],
        memberlist:[{//等级
          value: '0',
          label: '普通会员'
        },{
          value: '1',
          label: 'vip会员'
        },{
          value: null,
          label: '全部'
        }],
        genderlist:[{//性别
          value: '2',
          label: '男'
        },{
          value: '1',
          label: '女'
        },{
          value: null,
          label: '全部'
        }],
        value: '',
     // 分页
      paging:{
        currentPage: 1,//当前的默认的页数
        eachpage: 10,//默认的页码
        total: 0,//初始值共数据条
        totalPageNo: 1,
        // 搜索值
        name: '',
        id:'',
        level:"",
        gender:"",
        status:""
      },
      listData:[],//初始化数据
      dialogFormVisible:false,
      FormVisible: false, //弹窗口
      select:[],//选中的权限'
      rules:[],
      data:[],
      authoriId:'',
    // 弹框
      titleMap: {
        addEquipment:'新增',            
        editEquipment: "编辑"            
     },
     //  输入框宽度
     formLabelWidth: '120px',
    //  输入框值
     ruleForm:{
        nickname:"",
        phone:"",
        password:"",
        level:"",
        gender:"",
        status:"",
        id:""
     },
    //  验证
      rules:{
        //   呢称
         nickname:[
           { required: true, message: '用户呢称不能为空', trigger: 'blur' },
        ],
        // 手机号
         phone:[
           { required: true, message: '用户手机号不能为空', trigger: 'blur' },
                                    //    验证手机号
           {required: true,pattern:/^1[3|4|5|6|7|8][0-9]{9}$/,message: '请输入正确的手机号',trigger: 'blur'}
        ],
        // 密码
         password:[
           { required: true, message: '用户密码不能为空', trigger: 'blur' },
        //    {required: true,pattern:/^[a-zA-Z]\w{8,18}$/,message: '至少八个以字母开头加数字',trigger: 'blur'}
        ],
      },
     dialogStatus:"",
    }
  },
//  过滤器
  filters: {
     //   时间戳
      formatDate: function (value) {
        let date = new Date(value);
        // let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        // let s = date.getSeconds();
        // s = s < 10 ? ('0' + s) : s;
        return MM + '月' + d + '日' + h + '时' + m +'分'
      },
    //   性别循环判断
      genders:function(value){
         switch(value) {
         case 0:
            value='未知性能'
            break;
        case 1:
            value='女'
            break;
        case 2:
            value='男'
            break;
       } 
       return value
      },
    //   等级
      levels:function(value){
          return value==0?'普通会员':'vip会员'
      },
    //   状态
      statuss:function(value){
          return value==1?'激活':'冻结'
      },
       status:function(value){
          return value==0?'激活':'冻结'
      }
    },
    // 创建后挂载
  created() {
    this.Usermanage()
  },
  methods: {
    // 分页负值
    handles(val) {
      this.allPages = val;
      this.Usermanage()
    },
    //数据详情
      Usermanage(){
        let _this=this
        usermanage.member(_this.paging).then(res=>{
        console.log(res)
        // 会员的数据
            _this.listData=res.data.data.items
            // 分页的参数
            _this.paging.currentPage=res.data.data.pageNo
            _this.paging.eachpage=res.data.data.pageSize
            _this.paging.total=res.data.data.total
            _this.paging.totalPageNo=res.data.data.totalPageNo
        })
      },
    //   删除
    handleDelete(row) {
      let _this = this;
      let id = row.id;
      _this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          // 删除提示框
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
        usermanage.deletes(row.id,row.nickname).then(res=>{
            console.log(res)
            if (res.data.errmsg=='成功') {
                 _this.$message({
                    message: "恭喜你，删除成功",
                    type: "success",
                 });
            }else{
              _this.$message.error(res.data.errmsg);
            }
            _this.Usermanage()
        })
        })
        .catch(() => {
          _this.$information.error("已取消删除");
        });
    },
    // 添加编辑
    affirm(ruleForm){
                 //判断输入框是否为空
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
               if(this.dialogStatus=='addEquipment'){
            usermanage.addition(this.ruleForm).then(res=>{
                console.log(res)
                if (res.data.errmsg=='成功') {
                  this.$message({
                    message: '恭喜你，添加成功',
                    type: 'success'
                    });
                }else{
                   this.$message.error(res.data.errmsg);
                }
            this.Usermanage()
             this.dialogFormVisible = false;
        })
        }
        // 编辑
        if(this.dialogStatus=='editEquipment'){
            usermanage.compile(this.ruleForm).then(res=>{
                if (res.data.errmsg=='成功') {
                  this.$message({
                    message: '恭喜你，更新用户成功',
                    type: 'success'
                    });
                }else{
                   this.$message.error(res.data.errmsg);
                }
            this.role()
        })
         this.dialogFormVisible=false
        }
          } else {
           this.$message.error('输入框不能为空！');
            return false;
          }
        });
    },
    // 状态
    authorization(row){
        //  先进行判断更改值因为先执行上面的代码，更改好后把更改的值传递过去拿到最新的值
         if (row.status==0) {
                 row.status=1
                } else {
                  row.status=0
                }
        let data={
            userId :row.id,
            status :row.status
        }
         usermanage.accredit(data).then(res=>{
              if (res.data.errmsg=='成功') {
                  this.$message({
                    message: '状态更改成功!',
                    type: 'success'
                    });
                }else{
                   this.$message.error(res.data.errmsg);
                }
        })
    },
    // 添加
     addEquipment() {
        this.dialogFormVisible = true;//弹框状态
        this.dialogStatus = 'addEquipment';
        this.ruleForm={};
    },
    // 编辑
      handelEdit(row) {
         this.ruleForm.id=row.id;
         this.dialogFormVisible = true;//弹框状态
         this.dialogStatus = 'editEquipment';
         this.ruleForm=row;
        //  判断状态的值
         this.ruleForm.level=row.level==1?'女':'男';
         this.ruleForm.gender=row.gender==0?'普通会员':'vip会员';
         this.ruleForm.status=row.status==0?'冻结':'激活';
        },
    },
watch:{
    // 去除错误提示
    dialogFormVisible(val){
     if (val == false) {
         this.$refs.ruleForm.clearValidate();
     }
    }
  }
}
</script>
<style scoped>
.role{
    width: 100%;
    line-height: 0px;
    overflow: hidden;
}
/* 添加编辑 */
.el-input{
    width: 300px;
}
.el-form/deep/.el-input__inner{
    width: 300px;
}
.el-form/deep/.el-form-item__content{
    width: 300px;
} 
>>>.el-dialog/deep/.el-dialog__header{
    width: 50px;
}
.el-form-item/deep/.el-form-item__error{
    text-indent:3rem
}
/* 分页 */
.block{
    width: 40%;
    padding-top: 20px;
}
/* 字体居中 */
.blue{
    background: #409EFF;
    color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
   text-align: center;
}
.el-table/deep/th.is-sortable {
    cursor: pointer;
    text-align: center;
}
.el-table td, .el-table/deep/th.is-leaf {
    text-align: center;
}
/* 布局 */
.el-card/deep/.box-card{
  height: 50%;
   overflow: hidden;
}
.role-content{
    width: 96%;
    margin: auto;
    overflow: hidden;
}
.el-input{
    width: 200px;
    margin-right: 10px;
}
.role-top{
   
   line-height: 60px;
}
.role-top/deep/.el-select{
    width: 200px;
    margin-right: 8px;
}
.box-card{
   overflow: hidden;
}
</style>
